<template>
  <div class="home">
    <el-carousel indicator-position="outside"
                 :height="banH +'px'">
      <el-carousel-item v-for="item in list"
                        :key="item">
        <img :src="item.imgPath"
             class="rightullidiv"
             @click="jump()">
      </el-carousel-item>
    </el-carousel>
    <div class="green-main clearfix green-blue-panel">
      <a class="green-blue-panel_1"
         href="/shortRent">
        <h3>短租服务，灵活自如</h3>
        <p>无论您是想约会、自驾游、踏青还是商务接待…</p>
        <p>我们随时恭候您的光临，随取随还，灵活自如。</p>
      </a>
      <a class="green-blue-panel_2"
         href="/longRent">
        <h3>超值长租，实惠便捷</h3>
        <p>如果您常租车，我们建议您可以尝试长租，按月起租，实惠方便。</p>
      </a>
      <a class="green-blue-panel_3"
         href="/becomeTheOwner">
        <h3>成为车主，赚取收益</h3>
        <p>出租你的爱车，利用车辆闲置时间为你获得额外收益；我们提供全面保障，让你的爱车共享无忧！</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      banH: 450,
      list: [
        {
          imgPath: 'https://carphoto.atzuche.com/pcweb/1585570335205.jpg'
        },
        {
          imgPath: 'https://carphoto.atzuche.com/pcweb/1610331434723.png'
        }
      ]
    }
  },
  methods: {
    jump () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../assets/css/style.css';
.rightullidiv {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  .rightulliimg {
    max-width: 100%;
  }
}
</style>
